<template>
  <div class="layout">
    <div class="box">
      <u-swiper
        @click="clickSwiper"
        interval="5000"
        duration="500"
        height="300"
        v-if="res"
        name="img"
        :list="res.list"
      >
        <u-loading slot="loading"></u-loading>
      </u-swiper>
    </div>
    <div class="addr_mask u-flex u-row-between">
      <div class="u-flex u-flex-col u-col-top tips">
        <text>定位服务尚未开启</text>
        <text>开启后才能看到附近的活动哦</text>
      </div>
      <div class="u-felx">
        <u-button size="mini" type="error">去开启</u-button>
        <u-icon name="close" color="#fff" class="u-m-l-20"></u-icon>
      </div>
    </div>
  </div>
</template>

<script>
import { modelNavigateTo } from "./tpl";
export default {
  title: "导航栏",
  props: ["res"],
  watch: {
    res: {
      handler(newValue, oldValue) {
        this.$set(this, "res", newValue);
      },
      deep: true,
    },
  },

  mounted() {},
  methods: {
    clickSwiper(index) {
      modelNavigateTo(this.res.list[index]);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
  position: relative;
}
.addr_mask {
  position: absolute;
  height: 100rpx;
  background: #000000;
  border-radius: 20rpx;
  opacity: 0.49;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0 40rpx;
}
.tips {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text {
    text-align: left;
  }
}
</style>
